import './App.css';

// import store from './store/reduxIndex';
// let state = store.getState()
// function App() {
//   // console.log('state',state)
//   return (
//     <div className="App">
//       <h1>React状态的基本管理</h1>
//       <div>显示store数据：{JSON.stringify(state)}</div>
//       <button  onClick = {()=>{
//         store.dispatch({
//           type:"changeMsg",
//           payload:"通过dispatch方法修改state的值"
//         })
//       }
//       }   >通过dispatch方法修改state的值</button>
//     </div>
//   );
// }



// import {connect} from "react-redux"

// function App(props) {
//   console.log('props',props)
//   return (
//     <div className="App">
//       <h1>React状态的基本管理</h1>
//       <div>显示store数据：{props.msg}</div>
//       <button  onClick = {()=>{
//         // props.dispatch({
//         //   type:"changeMsg",
//         //   payload:"react-redux通过dispatch方法修改state的值"
//         // })
//         props.changeMsg()
//       }
//       }   >通过dispatch方法修改state的值</button>
//     </div>
//   );
// }

// let ReduxApp = connect((state)=>{
//   return {
//     msg:state.msgReducer.msg
//   }
// },(dispatch)=>{
//   return{
//     changeMsg(){
//       dispatch({
//         type:"changeMsg",
//         payload:"react-redux通过dispatch方法修改state的值"
//       })
//     }
//   }
// })(App)


// /////reduxjs/toolit 方法 
// //redux connet方法  只是适用于 函数组件

// import {connect} from "react-redux"
// import { changeMsg } from './store/reduxjstoolkit';

// function App(props) {
//   console.log('props',props)
//   return (
//     <div className="App">
//       <h1>React状态的基本管理</h1>
//       <div>显示store数据：{props.msg}</div>
//       <button  onClick = {()=>{
//         // props.dispatch({
//         //   type:"changeMsg",
//         //   payload:"react-redux通过dispatch方法修改state的值"
//         // })
//         props.changeMsg()
//       }
//       }   >通过dispatch方法修改state的值</button>
//     </div>
//   );
// }

// let ReduxApp = connect((state)=>{
//   return {
//     msg:state.msgReducer.msg
//   }
// },(dispatch)=>{
//   return{
//     changeMsg(){
//       dispatch(changeMsg("暴露出来的方法改变数值"))
//       // dispatch({
//       //   type:"msgSlice/changeMsg",
//       //   payload:"react-redux通过dispatch方法修改state的值"
//       // })


//     }
//   }
// })(App)





/////reduxjs/toolit 方法 
//redux 使用hook的方式   只能用于函数组件和toolkit

import {useSelector,useDispatch} from "react-redux"
import { addNum,asyncChangeNum } from './store/reduxjstoolkit';
function App(props) {

  let num = useSelector((state)=>{return state.numReducer.num})
  let dispatch = useDispatch()
  return (
    <div className="App">
      <h1>React状态的基本管理（hook的使用方法）</h1>
      <button onClick={()=>{
        dispatch(addNum())
      }}>修改仓库的数据</button>

      <button onClick={()=>{
        dispatch(asyncChangeNum(666666))
      }}>异步修改仓库的数据</button>
      <div>通过useSelector得到的数据 ----- {num}</div>
    </div>
  );
}


export default App;
